const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  // 入口文件路径
  entry: './src/main.js',
  // 输出信息
  output: {
    filename: 'js/[name]-[hash:8].bundle.js'
  },
  // loader 配置
  module: {
    rules: [
      // 处理 js 文件
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // 编译 vue 文件
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      // 处理图片资源
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024, // 限制 10KB 以下的用 url-loader 处理
            esModule: false, // 解决 img 标签中 src="[object Module]" 的问题，作用是启用 CommonJS 模块语法
            name: 'img/[name]-[hash:8].[ext]'
          }
        }
      },
      // 处理样式
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      // 使用 eslint 校验代码风格
      {
        test: /\.(js|vue)$/,
        use: {
          loader: 'eslint-loader',
          options: {
            formatter: require('eslint-friendly-formatter') // 默认的错误提示方式
          }
        },
        enforce: 'pre', // 编译前检查
        exclude: /node_modules/, // 不检查的文件
        include: [resolve('src')], // 要检查的目录
      }
    ]
  },
  // 插件配置
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './public/index.html',
      title: 'Vue Project',
      url: '../public/'
    }),
    new webpack.DefinePlugin({
      BASE_URL: JSON.stringify('')
    })
  ],
  resolve: {
    extensions: ['.vue', '.js'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}